<template>
  <div>
    <!-- 三级分类 -->
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <Reclassify @getAttrId="getAttrId"></Reclassify>
    </el-card>

    <el-card class="mt-20">
      <!-- 添加按钮 -->
      <template #header>
        <el-button type="primary" size="small" icon="el-icon-plus">添加属性</el-button>
      </template>

      <!-- 表格 -->
      <!-- :data="" -->
      <!-- @selection-change="handleSelectionChange" -->
      <el-table border stripe>
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column label="属性名称" width="180" />
        <el-table-column label="属性值名称列表" />
        <el-table-column label="操作" width="180">
          <template #default="{ row, $index }">
            <el-button type="primary" size="small" icon="el-icon-edit-outline"></el-button>
            <el-button type="primary" size="small" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div>{{ getCategory3Id }}</div>
  </div>
</template>

<script>
// 导入api
import { getAttrInfoList } from '@/api/product/attr'
export default {
  name: 'Attr',
  data: () => {
    return {
      category1Id: '',
      category2Id: '',
      category3Id: ''
    }
  },
  // 所有的方法都卸载 methods 中
  methods: {
    // 声明一个自定义事件
    getAttrId({ categoryId, level }) {
      if (level === 1) {
        // 表示一级分类id已经有了
        this.category1Id = categoryId
      } else if (level === 2) {
        // 表示二级分类id已经有了
        this.category2Id = categoryId
      } else {
        this.category3Id = categoryId
      }
    },
    // 取出发送接口需要的参数
    async attrInfoList() {
      const { category1Id, category2Id, category3Id } = this
      const result = await getAttrInfoList(category1Id, category2Id, category3Id)
      console.log(result)
    }
  },
  // 计算属性
  computed: {
    getCategory3Id() {
      return this.$store.state.reclassify.getCategory3Id
    }
  },
  watch: {
    // 监听
    getCategory3Id: {
      handler(newVal) {
        console.log(newVal)
        if (!newVal) {
          return
        }
        this.attrInfoList()
      },
      immediate: true
    }
  },
  // 挂载钩子函数
  mounted() {}
}
</script>

<style lang="scss" scoped></style>
